/**
 * 一起学 mapbox 第五讲  面
 *
 *  注意：面 图层数据格式
 *
 */


const map = window.$myMap
map.on('click', (e) => {
  console.log(e)
})

// 基础面数据
var polygonData = {
  'type': 'FeatureCollection',
  'features': [
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
            [
              [121.4740719374974, 31.230417047893894],

              [121.47537241460122, 31.230372094620677],
              [121.47833070695839, 31.230858922978314],
              [121.47933541002544, 31.22927433519868],
              [121.47575196909128, 31.2273651580023],
              [121.47428956796307, 31.228443847858117],

              [121.4740719374974, 31.230417047893894],

            ]
          ]
      },
      'properties': {
        fillColor: '#ff0000',
        fillOpacity: 0.5
      }
    },
  ]
}

// 3 创建数据源并添加
var polygonSource = {
  type: 'geojson',
  data: {
    type: "FeatureCollection",
    features: []
  },
}
map.addSource('polygonSource', polygonSource)
var polygon_Source = map.getSource('polygonSource');
polygon_Source.setData(polygonData)


// 4 创建图层并添加
var polygonLayer = {
  id: 'polygonLayer',
  type: 'fill',
  source: 'polygonSource',
  layout: {},
  // 特殊化定制 https://docs.mapbox.com/style-spec/reference/layers/#fill
  'paint': {
    'fill-color': ['get', 'fillColor'],
    'fill-opacity': ['get', 'fillOpacity'],
  }
}
map.addLayer(polygonLayer)

